<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<view class="form">
					<wd-form ref="formRef" :model="formData" :rules="rules">
						<view class="wd-iput1">请输入卡号</view>
						<wd-input prop="real_name" custom-class="wd-iput2" no-border v-model="formData.real_name"
							placeholder="姓名" />
						<wd-input prop="card_no" custom-class="wd-iput3" no-border v-model="formData.card_no"
							placeholder="卡号" />
						<wd-picker value-key="id" label-key="title" prop="bank_id" :columns="columns" placeholder="银行名称"
							v-model="formData.bank_id" />
						<!-- <wd-input prop="bank_name" custom-class="wd-iput3" no-border type="text"
							v-model="formData.bank_name" placeholder="银行名称" /> -->
					</wd-form>
				</view>
				<view class="footer" id="footer">
					<view class="btns">
						<wd-button type="success" @click="submit"
							custom-class="wd-button-custom-class-my-success  wd-button-custom-class-w100">确认添加</wd-button>
					</view>
				</view>
			</view>
		</wd-config-provider>
	</app-page>
</template>

<script lang="ts">
	import { defineComponent, ref } from 'vue';
	import useRouter from '@/hooks/useRouter.ts';
	import { onLoad } from '@dcloudio/uni-app';
	import { addBank, getBankTypeList } from '@/api/index.ts';
	export default defineComponent({
		name: '',
		components: {
		},
		setup(props, ctx) {
			const router = useRouter();
			const theme = ref('');
			const formRef = ref();
			const formData = ref({
				real_name: "",
				card_no: "",
				bank_id: "",
			})
			const rules = {
				real_name: [
					{
						required: true,
						message: '请输入姓名',
					}
				],
				card_no: [
					{
						required: true,
						message: '请输入银行卡号',
					}
				],
				bank_id: [
					{
						required: true,
						message: '请选择银行',
					}
				],
			}
			const columns : any = ref([])
			onLoad(() => {
				getBankTypeList().then((res) => {
					columns.value = res;
				});
			})
			const submit = () => {
				formRef.value.validate().then(({ valid }) => {
					if (valid) {
						addBank({
							...formData.value,
						}).then(res => {
							uni.$wdToast.show("新增成功");
							setTimeout(() => {
								router.back({
									delta: 1
								});
							}, 1000)
						});
					}
				})
			}

			return {
				theme,
				formRef,
				formData,
				rules,
				columns,
				submit
			};
		}
	});
</script>
<!-- #ifdef MP-WEIXIN -->
<style lang="less">
	page {
		background-color: #f2f2f2;
	}
</style>
<!-- #endif -->
<style lang="less" scoped>
	page {
		background-color: #f2f2f2;
	}

	.container {
		padding: 24rpx;

		.no-border::after {
			display: none !important;
		}

		.form {
			border-radius: 13rpx;
			overflow: hidden;

			.wd-iput1 {
				background-color: #ffffff;
				padding: 24rpx;
				font-family: PingFang;
				font-weight: bold;
				font-size: 33rpx;
				color: #333333;
			}

			:deep(.wd-iput2),
			:deep(.wd-iput3) {
				padding: 24rpx;

				font-size: 25rpx;
				color: #333333;
			}
		}

		.footer {
			position: fixed;
			padding: 24rpx;
			bottom: 100rpx;
			left: 0rpx;
			width: calc(100% - 24rpx - 24rpx);
			min-height: 100rpx;
			border-radius: 21rpx 21rpx 0 0;

			.btn {
				padding: 30rpx 29rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
</style>